<template>
  <div id="home" @scroll="scrollMain">
    <div class="main" ref="home">
      <div class="rule" @click="layerShow">规则</div>
      <div class="mainBg">
        <div class="mainBgTitle">送你10元现金已入账</div>
        <div class="card">
          <div class="cashBtn rowFlex spaceBetween cloumnCenter">
            <div class="cardLeft">账户预存</div>
            <div class="cardRight" @click="getMoney">立即提现</div>
          </div>
          <div class="numMoney">￥10</div>
          <p class="cardInfo">已将10元预存到您得账户中,请及时提现</p>
          <div class="cardBottom">
            <p>{{outTime}}</p>
          </div>
        </div>
      </div>
      <!-- 没有数据 -->
      <div class="noFriend cloumnFlex cloumnCenter"  v-if="!hasDataList"> 
        <div class="title rowFlex spaceBetween cloumnCenter">
          <img src="https://res.youth.cn/newActive/allCash/title3.png" alt>
        </div>
        <div class="noDataImg"></div>
        <div class="noDataInfo">邀请好友加入，你和TA均可获得10元</div>
        <div class="invBtn" @click="shareWx('shareWxhy')">微信快速邀请</div>
      </div>
      <!-- 有数据 -->
      <div class="hasData" v-if="hasDataList">
        <div class="title rowFlex spaceBetween cloumnCenter">
          <img src="https://res.youth.cn/newActive/allCash/title1.png" alt>
        </div>
        <div class="invFriends rowFlex allCenter">
          <div class v-for="(item,index) in friendsList" :key="index">
            <!-- 已邀请 -->
            <div class="friendsItem cloumnFlex allCenter" v-if="item.avatar">
              <div class="itemImg">
                <img :src="item.avatar" alt>
              </div>
              <p>{{item.nickname}}</p>
            </div>
            <!-- 未邀请 -->
            <div class="friendsItem cloumnFlex allCenter" v-if="!item.avatar" @click="shareWx('shareWxhy')">
              <div class="itemImg">
                <img src="https://res.youth.cn/newActive/allCash/kong.png" alt>
              </div>
              <p></p>
            </div>
          </div>
        </div>
        <div class="invBtn" @click="shareWx('shareWxhy')">微信快速邀请</div>
      </div>
      <div class="myFriends">
        <div class="title rowFlex spaceBetween cloumnCenter">
          <img src="https://res.youth.cn/newActive/allCash/title2.png" alt>
        </div>
        <div class="friendsList">
          <div class="friendItem" v-for="(item,index) in canInvList" :key="index">
            <div class="userinfo rowFlex rowFirst cloumnCenter swiper-slide">
              <div class="userImg">
                <img :src="item.avatar">
              </div>
              <div class="userName rowFlex cloumnFlex rowCenter">
                <div class="name">{{item.nickname}}</div>
                <div class="time">
                  成功邀请可
                  <span>再得 6-7.5 元</span>
                </div>
              </div>
            </div>
            <div class="hotNum">
              <div @click="shareWx('shareWxhy')">前往邀请</div>
            </div>
          </div>
          <!-- 加载配置 -->
          <div class='loadMore' v-if="loadMore">
            <div class='icon'>
              <img src='https://res.youth.cn/active/one/img/loading.png'  alt="" />
            </div>
            <p class='loadingText'>正在加载</p>
          </div>
          <div class="noData" v-if="noData">没有更多数据了</div>
        </div>
      </div>
      <div class="bottom rowFlex allCenter">
        <div class="bottomItem cloumnFlex allCenter" @click="shareWx('shareWxhy')">
          <div class="hot">热</div>
          <img class="itemImg" src="https://res.youth.cn/active/one/img/newInv/new/addwx.png" alt>
          <p class="itemText">微信邀请</p>
        </div>
        <div class="bottomItem cloumnFlex allCenter" @click="shareWx('shareWxhy')">
          <div class="hot">热</div>
          <img class="itemImg" src="https://res.youth.cn/active/one/img/newInv/new/addqun.png" alt>
          <p class="itemText">微信群聊</p>
        </div>
        <div class="bottomItem cloumnFlex allCenter" @click="goFace" >
          <img class="itemImg" src="https://res.youth.cn/active/one/img/newInv/new/addqr.png" alt>
          <p class="itemText">面对面邀请</p>
        </div>
        <div class="bottomItem cloumnFlex allCenter" @click="shareWx('shareQhy')">
          <img class="itemImg" src="https://res.youth.cn/active/one/img/newInv/new/addqq.png" alt>
          <p class="itemText">QQ邀请</p>
        </div>
      </div>
      <!-- 弹窗 -->
      <div class="layer cloumnFlex allCenter" @click="closeLayer" v-if="noDataLayer">
        <div class="layerNoTask swashIn cloumnFlex cloumnCenter" @click.stop="clickStop($event)">
          <div class="close" @click="closeLayer"></div>
          <div class="noDataImg"></div>
          <p class="noDataText">暂无完成任务呦~</p>
          <div class="layerTextItem rowFlex">
            <div class="layerTextItemImg"></div>
            <div class="layerTextItemText">10元余额需邀请4位新用户来助阵即可提现！</div>
          </div>
          <div class="layerTextItemTwo rowFlex">
            <div class="layerTextItemImg"></div>
            <div class="layerTextItemText">发送消息后,告知朋友"最高可得10元现金,秒提现"</div>
          </div>
          <div class="layerBtn" @click="shareWx('shareWxhy')">立即邀请</div>
        </div>
      </div>
      <!-- 规则弹窗 -->
      <div class="layer cloumnFlex allCenter" @click="closeLayer" v-if="ruleLayer">
        <div class="layerRule swashIn" @click="clickStop($event)">
          <div class="layerRuleMain cloumnFlex cloumnCenter">
            <div class="close" @click="closeLayer"></div>
            <div class="layerRuleTitle">活动规则</div>
            <div class="ruleText">
              <p class="ruleTextTitle">活动规则</p>
              <p class="text">1.活动奖励金额已预存到您的账户中，参与完成任务即可提现；</p>
              <p class="text">2.奖励金额提现任务时间为3天（72小时），活动时间内未完成任务，则活动取消；</p>
              <p class="text">3.若完成任务，即可提现，提现不受时间限制；发起提现后活动结束；</p>
              <p class="text">4.若提现失败，奖励金额会已青豆形式返回到您的账户中，可在“收益明细”中查看；</p>
              <p class="text">5.邀请新用户注册，以用户注册时间为准进行计算；</p>
              <p class="ruleTextTitle" style="margin-top:0.2rem;">温馨提示</p>
              <p class="text">1.若用户存在违规行为（包含但不限于虚假交易、恶意注册、作弊等行为），则有权利取消用户活动资格，并收回其奖励；</p>
              <p
                class="text"
              >2.如出现不可抗力或情势变更情况（包含但不限于重大灾害事件、活动受外力因素调整或停止、活动收到严重的网络故障等）则中青看点则可根据规定主张免责；</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 对话框 -->
      <div class="layer cloumnFlex allCenter" @click="closeLayer" v-if="layerAlert" >
        <div class="layerAlert swashIn cloumnFlex cloumnCenter" @click.stop="clickStop($event)">
          <div class="layerAlertTitle">{{alertData.title}}</div>
          <div class="layerAlertInfo">
            {{alertData.info}}
            <p :class="alertData.id!=5?'wxNum':'wxNumTwo'">{{alertData.wxNum}}</p>
          </div>
          <div class="btns rowFlex" v-if="alertData.id!=5">
            <div class="btnsLeft" @click="layerCheckWx">{{alertData.deny}}</div>

            <div v-if="alertData.id==1 || alertData.id==2" class="btnsRight" @click="StayBehind">{{alertData.sure}}</div>
            <!-- 提现 -->
            <div v-if="alertData.id==3" class="btnsRight" @click="getMoneyAjax">{{alertData.sure}}</div>
            <!-- 授权 -->
            <div v-if="alertData.id==4" class="btnsRight" @click="wxSuccess">{{alertData.sure}}</div>

          </div>
          <div class="btns rowFlex allCenter" v-if="alertData.id==5" style="color:#fd634a;" >
            {{alertData.ok}}
          </div>
        </div>
      </div>
      <div class="layer cloumnFlex allCenter" @click="closeLayer" v-if="successLayer">
        <div class="layerAlertTitle">成功发起提现</div>
        <div class="layerAlertInfo">
          提现到账信息可在 <br/>
          我的 → 兑换提现 → 提现记录中查询
          </div>
      </div>
      <div class="layer cloumnFlex allCenter" v-if="successLayer">
        <div class="layerAlert swashIn cloumnFlex cloumnCenter" >
          <div class="layerAlertTitle">成功发起提现</div>
          <div class="layerAlertInfo">
            提现到账信息可在
            <p >我的 → 兑换提现 → 提现记录中查询</p>
          </div>
          <div class="btns rowFlex allCenter"  style="color:#fd634a;" >
           我知道了
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//  还需要邀请的好友数
var num = 1;
import LDZS from "@utils/LDZS";
import { setTimeout } from "timers";
import $http from "@build/url.js";
export default {
  data() {
    return {
      noDataLayer: false,
      ruleLayer: false,
      layerAlert: false,
      loadMore:true,
      noData:false,
      dataNum: "1",
      url: "",
      inveList: {},
      hasDataList: false,
      friendsList: [],
      countTime: Number,
      invNum: Number,
      isWechatAuth: Number,
      myWxName:"",
      canInvList: [],
      urlDataObj: {},
      ajax:true,
      pageIndex: 1,
      successLayer:false,
      alert: [
        //  可以提现
        {
          id: 1,
          title: "客观请留步",
          info: "您有10元现金可提现",
          deny: "稍后回来",
          sure: "留下进行提现",
          wxNum: ""
        },
        // 在邀请2位好友即可提现
        {
          id: 2,
          title: "客观请留步",
          info: "再邀请" + num + "位新人进行帮助即可进行提现",
          deny: "稍后回来",
          sure: "留下继续邀请",
          wxNum: ""
        },
        // 验证微信
        {
          id: 3,
          title: "温馨提示",
          info: "为保证顺利、安全到账本次提现将打入以下账号",
          deny: "稍后提现",
          sure: "立即提现",
          wxNum: "微信号:当时明月在 曾照彩云归"
        },
        // 微信授权
        {
          id: 4,
          title: "温馨提示",
          info: "为保证顺利、安全到账请先授权提现微信账号",
          deny: "稍后授权",
          sure: "立即授权",
          wxNum: ""
        },
        {
          id: 5,
          title: "成功发起提现",
          info: "提现信息可在",
          deny: "稍后授权",
          sure: "立即授权",
          ok:"我知道了",
          wxNum: "我的 → 兑换提现 → 提现记录中查询"
        }
      ],
      alertData: {}
    };
  },
  components: {},
  computed: {
    outTime: function() {
      let that = this;
      if (this.countTime < 0) {
        return "活动已结束";
      } else {
        if (this.invNum == "4") {
          return "恭喜您完成任务，马上去提现";
        } else {
          return `${Math.floor(this.countTime / 3600 / 24)} 天 ${Math.floor(
            (this.countTime / 60 / 60) % 24
          )} 小时 ${Math.floor((this.countTime / 60) % 60)} 分 ${Math.floor(
            this.countTime % 60
          )} 秒`;
        }
      }
    }
  },
  mounted() {
    this.alertData = this.alert[1];
    this.urlDataObj = LDZS.getUrlPrmt();
    this.myHasInv();
    this.canInvFriends();
    this.listenBack()
    LDZS.shareWx("shareWxhy")

  },
  methods: {
    closeLayer: function() {
      this.noDataLayer = false;
      this.ruleLayer = false;
      this.layerAlert = false;
      this.$refs.home.style.overflowY = "scroll";
    },
    layerShow: function() {
      this.ruleLayer = true;
      this.$refs.home.style.overflowY = "hidden";
    },
    noDataLayerFn: function() {
      this.noDataLayer = true;
      this.$refs.home.style.overflowY = "hidden";
    },
    hasData: function() {
      this.layerAlert = true;
      this.$refs.home.style.overflowY = "hidden";
    },
    // 阻止事件冒泡
    clickStop: function() {},
    // 已经邀请的好友
    myHasInv: function() {
      let data = window.location.search.split("?")[1];
      $http
        .get("/InviteActive/getInviteList?" + data)
        .then(res => {
          if (res.data.data) {
            this.invNum = res.data.data.inviteNum;
            this.isWechatAuth = res.data.data.isWechatAuth;
            this.myWxName=res.data.data.wechatNickname="啥都没有"
            this.resizeData(res.data.data);
            this.countTime = res.data.data.lastTime
            var timer;
            clearInterval(timer);
            timer = setInterval(() => {
              this.countTime--;
            }, 1000);
            
          } else {
            this.$toast.center("数据错误");
          }
        })
        .catch(err => {});
    },
    // 可邀请的好友
    canInvFriends: function(data) {
      this.ajax=false;
      $http
        .get(
          `/InviteActive/getFriendList?cookie=${
            this.urlDataObj.cookie
          }&cookie_id=${this.urlDataObj.cookie_id}&page=${
            this.pageIndex
          }&pageSize=10`
        )
        .then(res => {
          setTimeout(()=>{
            this.ajax=true;
          },150)
          if (res.data.status == "1") {
            
            if(JSON.stringify(res.data.data.list)=="[]" || !res.data.data.list){ // 没有数据了
                this.loadMore = false;
                this.noData=true;
            }else{
              for(let i=0;i<res.data.data.list.length;i++){
                this.canInvList.push(res.data.data.list[i])
              }
              console.log(this.canInvList)
              this.pageIndex++
            }
          } else {
            // 这里有bug 如果没有邀请的好友怎么办
            this.$toast.center("暂无可邀请的好友");
          }
        })
        .catch(err => {});
    },
    resizeData: function(data) {
      this.inveList = data;
      if (this.inveList.list.length > 0) {
        this.hasDataList = true;
        this.friendsList = this.inveList.list;
        let obj = {};
        if (this.friendsList.length < 4) {
          for (let i = 0; i < 4 - this.friendsList.length; i++) {
            this.friendsList.push(obj);
          }
        }
      } else {
        this.hasDataList = false;
      }
    },
    scrollMain: function() {  // 瀑布流
      if(this.ajax){
        this.scrollFun()
      }else{
        console.log("请求中")
      }
    },
    scrollFun: function() {
      if(this.noData){
          return false
      };

      let clientHeight = this.$refs.home.clientHeight;
      let scrollHeight = this.$refs.home.scrollHeight;
      let scrollTop = document.getElementById("home").scrollTop;
      if (scrollHeight - clientHeight - scrollTop <-50) {
        this.canInvFriends()
      }
    },
    goFace:function(){
      window.location.href="https://kd.youth.cn/user/qrcode_invite1"+window.location.search
    },
    getMoney:function(){ // 立即提现
        //this.invNum=4
        if(this.invNum=="4"){ // 条件满足
          this.checkWx()
        }else{
          this.noDataLayerFn()
        }
    },
    getMoneyAjax:function(){ // 微信提现的接口
      let data = window.location.search.split("?")[1];
      $http({
        method:"post",
        url:"/InviteActive/withdraw",
        contentType: "application/json;charset=utf-8",
        data:{
          1:"1",
          2:"2"
        }
      }).then(res=>{
        console.log(res)
        if(res.data.status=="1"){ // 提现成功
            this.successLayer=true;
        }else{
          this.$toast.center(res.data.msg)
        }
        this.successLayer=true;
        this.closeLayer()
        window.location.href="https://kandian.youth.cn/html/withdraw/forward.html"+window.location.search+"&money=10&withdrawType=2"
      })
    },
    shareWx:function(type){// 调取分享接口 shareWxhy 分享到微信  shareQhy 分享QQ
      LDZS.shareWx(type)
      this.closeLayer()
    },
    checkWx:function(){// 检查微信授权
      //this.isWechatAuth=2
      console.log(this.isWechatAuth)
      if(this.isWechatAuth=="2"){ // 已授权 显示提现确认弹框
        this.alertData = this.alert[2]
        this.alertData.wxNum = "微信号:"+ this.myWxName
        this.hasData()
      }else{ // 未授权
      this.alertData = this.alert[3]
        this.hasData()
      }
    },
   
    layerCheckWx:function(){
      this.closeLayer()
    },
    wxSuccess:function(){  // 点击微信授权
      LDZS.checkWxAuth()
      this.myHasInv()
      this.$toast.center("已成功授权微信 昵称:"+this.myWxName)
      this.closeLayer()
    },
    listenBack:function(){//监听返回函数
      window.addEventListener("popstate", function(){
          if(this.invNum==4){ // 任务完成
            this.alertData = this.alert[0]
            this.hasData()
          }else{
            this.alertData = this.alert[1]
            this.hasData()
          }
      }, false)
         
    },
    StayBehind:function(){ // 留下来！！！！
        this.closeLayer()
    }
  }

};
</script>
<style lang="less" scoped>
@import "./home.less";
</style>

